<template>
  <div id="mainPage">
    <!-- {{ isCollapse }} -->
    <div class="left">
      <div class="headerIcon">
        <i class="el-icon-s-custom"></i>
      </div>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        text-color="#1f92ef"
        :collapse="isCollapse"
        background-color="rgb(62, 61, 50)"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>导航一</span>
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">导航二</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <i class="el-icon-document"></i>
          <span slot="title">导航三</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-setting"></i>
          <span slot="title">导航四</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div :class="isCollapse ? 'right' : 'activeRight'">
      <div class="rightHeader">
        <i class="el-icon-s-fold" @click="collapseOpeart"></i>
        <div style="display: inline-block">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>活动管理</el-breadcrumb-item>
            <el-breadcrumb-item>活动列表</el-breadcrumb-item>
            <el-breadcrumb-item>活动详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      <div class="content">
        <!-- <create-form></create-form> -->
        {{ formValues }}
        <dd-build-form
          :config="formConfig"
          v-model="formValues"
        ></dd-build-form>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
// import createForm from "@/components/createForm/index.vue";
// 每个组件必须加
@Component({
  components: {
    // createForm
  }
})
export default class Home extends Vue {
  isCollapse: boolean = true;
  formValues: any = {
    title: "",
    desc: "",
    date: null,
    area: [],
    subject: [],
    tag: []
  };
  formConfig: any = {
    rules: {},
    elements: []
  };
  config: any = {
    rules: JSON.stringify({
      // prop
      title: [
        { required: true, message: "请输入名称" },
        { max: 5, message: "最多 5 个字符" }
      ],
      // prop
      desc: [
        { required: true, message: "请输入名称" },
        { max: 5, message: "最多 5 个字符" }
      ]
    }),

    elements: JSON.stringify([
      {
        tag: "el-input",
        item: {
          label: "标题"
        },
        detail: {
          name: "title",
          defaultValue: "默认标题"
        }
      },
      {
        tag: "el-input",
        item: {
          label: "描述"
        },
        detail: {
          type: "textarea",
          // 返回的v-model的字段
          name: "desc",
          placeholder: "请填写一个精彩的描述",
          rows: 3
        }
      },
      {
        tag: "el-date-picker",
        item: {
          label: "日期"
        },
        detail: {
          // 返回的v-model的字段
          name: "date",
          placeholder: "请选择日期",
          valueFormat: "yyyyMMdd"
        }
      },
      {
        tag: "el-radio",
        item: {
          label: "地区"
        },
        detail: {
          // 返回的v-model的字段
          name: "area",
          items: [
            { text: "北京", label: "1" },
            { text: "上海", label: "2" },
            { text: "广州", label: "3" },
            { text: "深圳", label: "4" }
          ]
        }
      },
      {
        tag: "el-checkbox",
        item: {
          label: "主题"
        },
        detail: {
          // 返回的v-model的字段
          name: "subject",
          items: [
            { text: "历史", label: "1" },
            { text: "战争", label: "2" },
            { text: "科幻", label: "3" },
            { text: "爱情", label: "4" },
            { text: "文艺", label: "5" },
            { text: "生活", label: "6" }
          ]
        }
      },
      {
        tag: "el-select",
        item: {
          label: "标签"
        },
        detail: {
          // 返回的v-model的字段
          name: "tag",
          multiple: true,
          items: [
            { label: "温暖", value: "1" },
            { label: "感动", value: "2" },
            { label: "刺激", value: "3" },
            { label: "紧张", value: "4" },
            { label: "有爱", value: "5" },
            { label: "搞笑", value: "6" }
          ]
        }
      }
    ])
  };

  @Watch("config", { deep: true, immediate: true })
  getConfig({ rules, elements }: any) {
    this.formConfig = {
      rules: JSON.parse(rules),
      elements: JSON.parse(elements)
    };
  }

  collapseOpeart() {
    if (this.isCollapse) {
      this.isCollapse = false;
    } else {
      this.isCollapse = true;
    }
  }
}
</script>
<style>
.mainPage {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.left {
  float: left;
  /* width: 200px; */
  background-color: rgb(62, 61, 50);
  height: 100vh;
}
.right {
  float: left;
  width: calc(100% - 65px);
}
.activeRight {
  float: left;
  width: calc(100% - 201px);
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 100vh;
}
.el-icon-s-custom {
  font-size: 30px;
  margin-left: 20px;
  line-height: 50px;
  color: rgba(53, 172, 255, 0.7);
}
.headerIcon {
  height: 40px;
  /* background: linear-gradient(270edg,rgb(30, 31, 28), #333); */
  background: linear-gradient(
      217deg,
      rgba(39, 40, 34, 0.8),
      rgba(30, 31, 28, 0) 70.71%
    ),
    linear-gradient(127deg, rgba(53, 52, 52, 0.8), rgba(99, 99, 99) 70.71%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
}

.rightHeader {
  margin-top: 10px;
  height: 27px;
  background: linear-gradient(top, #fff, #ddd);
  /* box-shadow: 50px 50px 0 0 rgba(233, 235, 236, 0.8); */
}

.el-icon-s-fold {
  font-size: 26px;
  margin-right: 6px;
  margin-left: 6px;
}
</style>
